<!-- 用途：用于支持字符串和数字类型的输入，同时进行数据转换 -->
<script setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
    data: {
        type: [String, Number]
    },
    inputWidth: {
        type: String,
        default: '140px'
    },
    placeholder: {
        type: String,
        default: "请输入内容"
    },
    // 判断是否需要默认值
    defaultValue: {
        type: [String, Number],
        default: ""
    }
})
let inputData = ref()
const emits = defineEmits(['update:data'])
const inputChanged = ()=>{
    console.log("inputData.value:",inputData.value)
    emits('update:data', Number(inputData.value)?Number(inputData.value):inputData.value)
}
onMounted(()=>{
    console.log("props.data:", props.data)
    if (props.data === '' || props.data == null) {
        inputData.value = props.defaultValue
    } else {
        inputData.value = props.data
    }
})
</script>

<template>
  <el-input v-model.trim="inputData" :placeholder="props.placeholder" :style="{width: props.inputWidth}"  @change="inputChanged()"/>
</template>  

<style scoped>

</style>